<template>
  <div class="contract-pool-container">
    <div class="table-head-container d-flex align-items-center">
      <span>合同：</span>
      <el-input
        placeholder="请输入学员名称/手机号/合同标题/合同编号"
        v-model="search"
        class="sc-container mr-16"
        style="width: 300px"
        clearable
        @keyup.enter.native="toSearch"
      >
      </el-input>
      <!-- <span>机构名称：</span>
      <el-input
        placeholder="请输入机构名称"
        v-model="orgName"
        class="sc-container mr-16"
        style="width: 250px"
        clearable
        @keyup.enter.native="toSearch"
      >
      </el-input> -->
      <span>成交时间：</span>
      <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-button
        type="primary"
        @click="toSearch"
        icon="el-icon-search"
        style="margin-left: 16px"
        >搜索</el-button
      >
    </div>
    <div class="table-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="有效账单" name="first">
          <ComTable
            :table-data="table1Data"
            :loading="eff_loading"
            :columns="effColumns"
            :showSelection="false"
            :tableHeight="tableHeight1"
          >
            <el-table-column slot="money" label="合同金额">
              <template slot-scope="scope">
                {{ $getMoney(scope.row.money) }}
              </template>
            </el-table-column>
            <el-table-column slot="actions" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="getContract(scope.row)"
                  >领取账单</el-button
                >
                <el-button
                  type="text"
                  @click="assignContract(scope.row)"
                  v-if="assignAuth"
                  >分配</el-button
                >
              </template>
            </el-table-column>
          </ComTable>
          <div class="p-contianer">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="pageSizes"
              :page-size.sync="pageSize"
              :total="total"
              :pager-count="5"
              class="p-bar"
              background
              layout="prev, pager, next, sizes, total, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="过期账单" name="second">
          <div
            class="table-manage-containeer"
            v-if="selectionList.length > 0 && showSelects"
          >
            <flexbox class="selection-bar">
              <div class="selected—title">
                已选中
                <span class="selected—count">{{ selectionList.length }}</span>
                项
              </div>
              <flexbox class="selection-items-box">
                <el-button
                  type="primary"
                  @click="selectionBarClick()"
                  class="d-flex align-items-center justify-content-center all_change"
                >
                  <span
                    class="d-flex align-items-center justify-content-center"
                  >
                    <img
                      src="@/assets/img/crm/assign2.png"
                      style="margin-right: 8px"
                      class="all_change_1"
                    />
                    <img
                      src="@/assets/img/crm/assign1.png"
                      style="margin-right: 8px"
                      class="all_change_2"
                    />
                    <span>恢复领取</span>
                  </span>
                </el-button>
              </flexbox>
            </flexbox>
          </div>
          <ComTable
            :table-data="table2Data"
            :loading="over_loading"
            :columns="overColumns"
            :tableHeight="tableHeight2"
            ref="table"
            @selectionChange="selection2Change"
          >
            <el-table-column slot="money" label="合同金额">
              <template slot-scope="scope">
                {{ $getMoney(scope.row.money) }}
              </template>
            </el-table-column>
            <el-table-column slot="actions" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="reNewStepOne(scope.row)"
                  >恢复领取</el-button
                >
              </template>
            </el-table-column>
          </ComTable>
          <div class="p-contianer">
            <el-pagination
              :current-page="current2Page"
              :page-sizes="page2Sizes"
              :page-size.sync="page2Size"
              :total="total2"
              :pager-count="5"
              class="p-bar"
              background
              layout="prev, pager, next, sizes, total, jumper"
              @size-change="handle2SizeChange"
              @current-change="handle2CurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 领取-弹框 -->
    <GetsContract
      :getConDialog="getConDialog"
      :rowDatas="rowDatas"
      @submit="getList"
    ></GetsContract>
    <!-- 分配-弹框 -->
    <AssignsContract
      :assignConDialog="assignConDialog"
      :title="assignConTitle"
      :rowDatas="rowDatas"
      @submit="getList"
    ></AssignsContract>
  </div>
</template>
<script>
import ComTable from "@/components/ComTable/index";
import GetsContract from "./components/GetsContract";
import AssignsContract from "./components/AssignsContract";
import Lockr from "lockr";
import { queryPageListBill, restoreReceive } from "@/api/crm/contractPool.js";
import PoolMixin from "../../mixins/pool";
export default {
  /**
   * 账单池子
   */
  data() {
    return {
      activeName: "first",
      effColumns: [
        {
          prop: "studentName",
          label: "学员",
        },
        {
          prop: "phone",
          label: "手机号",
        },
        // {
        //   prop: "orgName",
        //   label: "机构名称",
        //   width: "260px",
        // },
        {
          prop: "num",
          label: "合同订单编号",
          width: "240px",
        },
        {
          prop: "name",
          label: "合同标题",
        },
        {
          slot: "money",
        },
        {
          prop: "courseSource",
          label: "购买课程",
        },
        {
          prop: "billReturnType",
          label: "付款方式",
        },
        {
          prop: "paymentTime",
          label: "成交时间",
          width: "150px",
        },
        {
          slot: "actions",
          label: "操作",
        },
      ],
      overColumns: [
        {
          prop: "studentName",
          label: "学员",
        },
        {
          prop: "phone",
          label: "手机号",
        },
        // {
        //   prop: "orgName",
        //   label: "机构名称",
        //   width: "260px",
        // },
        {
          prop: "num",
          label: "合同订单编号",
          width: "240px",
        },
        {
          prop: "name",
          label: "合同标题",
        },
        {
          slot: "money",
        },
        {
          prop: "courseSource",
          label: "购买课程",
        },
        {
          prop: "billReturnType",
          label: "付款方式",
        },
        {
          prop: "paymentTime",
          label: "成交时间",
          width: "150px",
        },
        {
          prop: "expireTime",
          label: "过期时间",
          width: "150px",
        },
        {
          slot: "actions",
          label: "操作",
        },
      ],
      table1Data: [],
      table2Data: [],
      eff_loading: false,
      getConDialog: false,
      assignConDialog: false,
      assignConTitle: "",
      over_loading: false,
      // 分页-2
      current2Page: 1,
      page2Size: Lockr.get("crmPageSizes") || 15,
      page2Sizes: [15, 30, 60, 100],
      total2: 0,
      rowDatas: {},
      tableHeight1: document.documentElement.clientHeight - 364, // 表的高度
      tableHeight2: document.documentElement.clientHeight - 364, // 表的高度
      showSelects: true,
      orgName: "",
    };
  },
  mixins: [PoolMixin],
  components: {
    ComTable,
    GetsContract,
    AssignsContract,
  },
  created() {
    // 获取有效账单列表
    this.getList();
    // 获取过期账单列表
    this.getOverList();
  },
  mounted() {
    window.onresize = () => {
      this.tableHeight1 = document.documentElement.clientHeight - 364;
      this.updateTableHeight();
    };
  },
  computed: {
    // 分配权限
    assignAuth() {
      return this.crm && this.crm.orderPool && this.crm.orderPool.distribution;
    },
  },
  methods: {
    toSearch() {
      if (this.activeName == "first") {
        this.currentPage = 1;
        this.getList();
      } else {
        this.current2Page = 1;
        this.getOverList();
      }
    },
    /**
     *  有效账单-领取
     */
    getContract(row) {
      this.rowDatas = row;
      this.getConDialog = Date.now();
    },
    /**
     *  有效账单-分配
     */
    assignContract(row) {
      this.rowDatas = row;
      this.assignConTitle = "分配账单";
      this.assignConDialog = Date.now();
    },
    /**
     *  有效账单-列表
     */
    getList() {
      this.eff_loading = true;
      let passDatas = {
        orderPoolStatus: "有效",
        limit: this.pageSize,
        page: this.currentPage,
      };
      if (this.orgName) {
        passDatas.orgName = this.orgName;
      }
      let params = this.getsParams(passDatas);
      if (this.dateTime && this.dateTime.length > 0) {
        params.startTime = this.dateTime[0];
        params.endTime = this.dateTime[1];
      }
      queryPageListBill(params).then((res) => {
        this.table1Data = res.data.list;
        if (
          res.data.totalRow &&
          Math.ceil(res.data.totalRow / this.pageSize) < this.currentPage &&
          this.currentPage > 1
        ) {
          this.currentPage = this.currentPage - 1;
          this.getList();
        } else {
          this.total = res.data.totalRow;
          this.eff_loading = false;
        }
      });
    },
    /**
     *  单个恢复领取
     */
    reNewStepOne(row) {
      this.$refs.table.$refs.comTable.clearSelection();
      this.selectionList = [row];
      this.showSelects = false;
      this.selectionBarClick();
    },
    /**
     *  过期账单-恢复领取
     */
    selectionBarClick() {
      this.$confirm(
        `您正在操作账单的恢复领取，确认要恢复过期账单的领取权限吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "re_new_confirm",
          cancelButtonClass: "cancelButtonClass",
          confirmButtonClass: "confirmButtonClass",
        }
      ).then(() => {
        let ids = this.selectionList.map((item) => item.contractId);
        restoreReceive({ ids }).then((res) => {
          if (res.code == 0) {
            this.$message.success(res.msg);
            this.getList();
            this.getOverList();
          } else {
            this.$message.error(res.msg, 2000);
          }
        });
      });
    },
    /**
     *  过期账单-批量勾选
     */
    selection2Change(val) {
      this.selectionList = val;
      this.showSelects = true;
      this.updateTableHeight();
    },
    /**
     * 过期账单-列表
     */
    getOverList() {
      this.over_loading = true;
      let passDatas = {
        orderPoolStatus: "过期",
        limit: this.page2Size,
        page: this.current2Page,
      };
      if (this.orgName) {
        passDatas.orgName = this.orgName;
      }
      let params = this.getsParams(passDatas);
      queryPageListBill(params).then((res) => {
        this.table2Data = res.data.list;
        if (
          res.data.totalRow &&
          Math.ceil(res.data.totalRow / this.page2Size) < this.current2Page &&
          this.current2Page > 1
        ) {
          this.current2Page = this.current2Page - 1;
          this.queryPageListBill();
        } else {
          this.total2 = res.data.totalRow;
          this.over_loading = false;
        }
      });
    },
    /**
     * 过期账单-更改每页展示数量
     */
    handle2SizeChange(val) {
      Lockr.set("crmPageSizes", val);
      this.page2Size = val;
      this.getOverList();
    },
    /**
     * 过期账单-更改当前页数
     */
    handle2CurrentChange(val) {
      this.current2Page = val;
      this.getOverList();
    },
    updateTableHeight() {
      let offsetHei = document.documentElement.clientHeight;
      if (this.selectionList.length > 0) {
        this.tableHeight2 = offsetHei - 364 - 41;
      } else {
        this.tableHeight2 = offsetHei - 364;
      }
    },
  },
};
</script>
<style lang="scss">
@import "../../styles/selection-bar.scss";
// 重置取消确定弹框样式 -start
.re_new_confirm {
  width: 591px !important;
  .el-message-box__header {
    padding-left: 23px !important;
    padding-right: 23px !important;
    padding-top: 23px !important;
    .el-message-box__title {
      font-size: 16px !important;
      font-weight: bold !important;
    }
    .el-message-box__headerbtn {
      top: 23px !important;
      right: 23px !important;
    }
    .el-message-box__headerbtn .el-message-box__close {
      color: #999999 !important;
    }
  }
  .el-message-box__content {
    padding-bottom: 50px !important;
    padding-left: 23px !important;
    .el-message-box__message {
      font-size: 14px !important;
      color: #333333 !important;
    }
  }
}
.cancelButtonClass,
.confirmButtonClass {
  font-size: 14px !important;
}
.confirmButtonClass {
  margin-left: 16px !important;
}
.cancelButtonClass {
  color: #999999 !important;
}
// 重置取消确定弹框样式 -end
.table-head-container {
  padding: 14px 16px;
  background: white;
  margin-bottom: 16px;
}
.table-container {
  padding: 16px;
  background-color: white;
}
</style>
<style scoped lang="scss">
.all_change_2 {
  display: none;
}
.all_change:hover .all_change_1 {
  display: none;
}
.all_change:hover .all_change_2 {
  display: block;
}
.all_change img {
  width: 16px;
  height: 16px;
}
</style>